/**
 * BootstrapServletInfo插件
 * 主要就是将servlet接口生成html形式的说明文档
 * 依赖：jquery,F_util,bootstrap3
 * @param option
 * @constructor
 */
function BootstrapServletInfo(option){
    this.$result = null;
    this.$requestBody=null;
    this.$content = null;
    this.$detail = null;
    this.option = {
        title:'',
        description:'',
        param:[],
        remark:{
            url:null,
            param:null
        },
        getParamFn:null,
        runFn:null
    };
    F_utils.replaceProperty(this.option,option);
    this.init();
}

BootstrapServletInfo.prototype = {
    constructor:BootstrapServletInfo,
    _error:function(){
        this.$result.text("error! \n "+arguments[2]);
    },
    _console:function(data){
        this.$result.text(JSON.stringify(data,null,2));
    },
    _consoleRequestBody:function(data){
        this.$requestBody.text(JSON.stringify(data,null,2));
    },
    init:function(){
        this.$content = this._initContent();
        this.$detail = this._initDetail();
        return [this.$content,this.$detail];
    },
    _initContent:function(){
        var panel = $('<div></div>');

        var panelBody = $('<div class="panel-body"></div>');

        //生成表单
        var form = $('<form class="f_callout f_callout-warning"></form>');
        var paramText = '';
        if(!F_utils.isBlank(this.option.param)){
            this.option.param.forEach(function (value) {
                var label = $('<label>'+value.name+':</label>');
                var input = $('<input class="f_input-text" type="text" name="'+value.name+'" placeholder="'+value.title+'" />');
                form.append(label);
                form.append(input);
                //param文本说明
                paramText+= ' | '+value.title+'('+value.name+' ['+value.type+'])';
            });
            this.option.getParamFn = function(){
                return F_utils.getFormData(form);
            }
        }

        //接口参数说明
        var description = $('<div class="f_callout f_callout-info"></div>');
        description.append('<h4>'+this.option.title+'</h4>');
        description.append('<h5>'+this.option.description+'</h5>');
        $.each(this.option.remark,function (key,value) {
            description.append('<h5><label>'+key+':</label>'+value+'</h5>');
        });
        description.append('<h5><label>data:</label>'+paramText+'</h5>');

        var resquestFigure = $('<figure></figure>');
        var responseFigure = $('<figure></figure>');

        var result=$('<pre></pre>');
        var requestBody = $('<pre></pre>');
        this.$requestBody = requestBody;
        this.$result = result;

        var runButton=$('<button type="button" class="btn btn-success">执行</button>');
        runButton.click(function(){
            if(typeof this.option.runFn == 'function'){
                if(typeof this.option.getParamFn == 'function'){
                    this.option.runFn(this.option.getParamFn(),this._console.bind(this),this._error.bind(this),this._consoleRequestBody.bind(this));
                }else{
                    this.option.runFn(this._console.bind(this),this._error.bind(this),this._consoleRequestBody.bind(this));
                }
            }
        }.bind(this));

        responseFigure.append(result);
        resquestFigure.append(requestBody);
        panelBody.append(description);
        panelBody.append(form);
        panelBody.append(runButton);
        panelBody.append('<h5>请求数据</h5>');
        panelBody.append(resquestFigure);
        panelBody.append('<h5>执行结果</h5>');
        panelBody.append(responseFigure);

        panel.append(panelBody);
        return panel;
    },
    _initDetail:function(){

    },
    getContent:function(){
        return this.$content;
    },
    getDetail:function(){
        return this.$detail;
    }

};